<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/tables.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=embedded-content-other.html>← 4.8.15 MathML</a> — <a href=index.html>Table of Contents</a> — <a href=forms.html>4.10 Forms →</a></nav><ol class=toc><li><ol><li><a href=tables.html#tables><span class=secno>4.9</span> Tabular data</a><ol><li><a href=tables.html#the-table-element><span class=secno>4.9.1</span> The <code>table</code> element</a><ol><li><a href=tables.html#table-descriptions-techniques><span class=secno>4.9.1.1</span> Techniques for describing tables</a><li><a href=tables.html#table-layout-techniques><span class=secno>4.9.1.2</span> Techniques for table design</a></ol><li><a href=tables.html#the-caption-element><span class=secno>4.9.2</span> The <code>caption</code> element</a><li><a href=tables.html#the-colgroup-element><span class=secno>4.9.3</span> The <code>colgroup</code> element</a><li><a href=tables.html#the-col-element><span class=secno>4.9.4</span> The <code>col</code> element</a><li><a href=tables.html#the-tbody-element><span class=secno>4.9.5</span> The <code>tbody</code> element</a><li><a href=tables.html#the-thead-element><span class=secno>4.9.6</span> The <code>thead</code> element</a><li><a href=tables.html#the-tfoot-element><span class=secno>4.9.7</span> The <code>tfoot</code> element</a><li><a href=tables.html#the-tr-element><span class=secno>4.9.8</span> The <code>tr</code> element</a><li><a href=tables.html#the-td-element><span class=secno>4.9.9</span> The <code>td</code> element</a><li><a href=tables.html#the-th-element><span class=secno>4.9.10</span> The <code>th</code> element</a><li><a href=tables.html#attributes-common-to-td-and-th-elements><span class=secno>4.9.11</span> Attributes common to <code>td</code> and <code>th</code> elements</a><li><a href=tables.html#table-examples><span class=secno>4.9.12</span> Examples</a></ol></ol></ol><h3 id=tables><span class=secno>4.9</span> Tabular data<a href=#tables class=self-link></a></h3>


  <h4 id=the-table-element><span class=secno>4.9.1</span> The <dfn data-dfn-type=element><code>table</code></dfn> element<a href=#the-table-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table title="The <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.">Element/table</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-table-element:concept-element-categories>Categories</a>:<dd><a id=the-table-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-table-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-table-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-table-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-table-element:concept-element-content-model>Content model</a>:<dd>In this order: optionally a <code id=the-table-element:the-caption-element><a href=#the-caption-element>caption</a></code> element, followed by zero or more
   <code id=the-table-element:the-colgroup-element><a href=#the-colgroup-element>colgroup</a></code> elements, followed optionally by a <code id=the-table-element:the-thead-element><a href=#the-thead-element>thead</a></code> element, followed by
   either zero or more <code id=the-table-element:the-tbody-element><a href=#the-tbody-element>tbody</a></code> elements or one or more <code id=the-table-element:the-tr-element><a href=#the-tr-element>tr</a></code> elements, followed
   optionally by a <code id=the-table-element:the-tfoot-element><a href=#the-tfoot-element>tfoot</a></code> element, optionally intermixed with one or more
   <a id=the-table-element:script-supporting-elements-2 href=dom.html#script-supporting-elements-2>script-supporting elements</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-table-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-table-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-table-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-table-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-table>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-table>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-table-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTableElement</code>.</dl>

  <p>The <code id=the-table-element:the-table-element><a href=#the-table-element>table</a></code> element <a id=the-table-element:represents href=dom.html#represents>represents</a> data with more than one dimension, in
  the form of a <span>table</span>.</p>

  <p> Tables have rows, columns, and cells given by their descendants. The rows and
  columns form a grid; a table's cells must completely cover that grid without overlap.</p>

  

  <p>Authors are encouraged to provide information describing how to interpret complex tables.
  Guidance on how to <a href=#table-descriptions-techniques>provide such information</a> is given
  below.</p>

  <p>Tables must not be used as layout aids. Historically, some web authors have misused tables in
  HTML as a way to control their page layout. This usage is non-conforming, because tools attempting
  to extract tabular data from such documents would obtain very confusing results. In particular,
  users of accessibility tools like screen readers are likely to find it very difficult to navigate
  pages with tables used for layout.</p>

  <p class=note>There are a variety of alternatives to using HTML tables for layout, such as CSS
  grid layout, CSS flexible box layout ("flexbox"), CSS multi-column layout, CSS positioning, and
  the CSS table model. <a href=references.html#refsCSS>[CSS]</a></p>

  

  <p class=note>Authors  are encouraged to consider
  using some of the <a href=#table-layout-techniques>table design techniques</a> described below
  to make tables easier to navigate for users.</p>

  

  <hr>

  <dl class=domintro><dt><code><var>table</var>.<span id=dom-table-caption>caption</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the table's <code id=the-table-element:the-caption-element-2><a href=#the-caption-element>caption</a></code> element.</p>

    <p>Can be set, to replace the <code id=the-table-element:the-caption-element-3><a href=#the-caption-element>caption</a></code> element.</p>
   <dt><code><var>caption</var> = <var>table</var>.<span id=dom-table-createcaption>createCaption</span>()</code><dd><p>Ensures the table has a <code id=the-table-element:the-caption-element-4><a href=#the-caption-element>caption</a></code> element, and returns it.<dt><code><var>table</var>.<span id=dom-table-deletecaption>deleteCaption</span>()</code><dd><p>Ensures the table does not have a <code id=the-table-element:the-caption-element-5><a href=#the-caption-element>caption</a></code> element.<dt><code><var>table</var>.<span id=dom-table-thead>tHead</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the table's <code id=the-table-element:the-thead-element-2><a href=#the-thead-element>thead</a></code> element.</p>

    <p>Can be set, to replace the <code id=the-table-element:the-thead-element-3><a href=#the-thead-element>thead</a></code> element. If the new value is not a
    <code id=the-table-element:the-thead-element-4><a href=#the-thead-element>thead</a></code> element, throws a <a id=the-table-element:hierarchyrequesterror href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a>
    <code id=the-table-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   <dt><code><var>thead</var> = <var>table</var>.<span id=dom-table-createthead>createTHead</span>()</code><dd><p>Ensures the table has a <code id=the-table-element:the-thead-element-5><a href=#the-thead-element>thead</a></code> element, and returns it.<dt><code><var>table</var>.<span id=dom-table-deletethead>deleteTHead</span>()</code><dd><p>Ensures the table does not have a <code id=the-table-element:the-thead-element-6><a href=#the-thead-element>thead</a></code> element.<dt><code><var>table</var>.<span id=dom-table-tfoot>tFoot</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the table's <code id=the-table-element:the-tfoot-element-2><a href=#the-tfoot-element>tfoot</a></code> element.</p>

    <p>Can be set, to replace the <code id=the-table-element:the-tfoot-element-3><a href=#the-tfoot-element>tfoot</a></code> element. If the new value is not a
    <code id=the-table-element:the-tfoot-element-4><a href=#the-tfoot-element>tfoot</a></code> element, throws a <a id=the-table-element:hierarchyrequesterror-2 href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a>
    <code id=the-table-element:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   <dt><code><var>tfoot</var> = <var>table</var>.<span id=dom-table-createtfoot>createTFoot</span>()</code><dd><p>Ensures the table has a <code id=the-table-element:the-tfoot-element-5><a href=#the-tfoot-element>tfoot</a></code> element, and returns it.<dt><code><var>table</var>.<span id=dom-table-deletetfoot>deleteTFoot</span>()</code><dd><p>Ensures the table does not have a <code id=the-table-element:the-tfoot-element-6><a href=#the-tfoot-element>tfoot</a></code> element.<dt><code><var>table</var>.<span id=dom-table-tbodies>tBodies</span></code><dd><p>Returns an <code id=the-table-element:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=the-table-element:the-tbody-element-2><a href=#the-tbody-element>tbody</a></code> elements of the
   table.<dt><code><var>tbody</var> = <var>table</var>.<span id=dom-table-createtbody>createTBody</span>()</code><dd><p>Creates a <code id=the-table-element:the-tbody-element-3><a href=#the-tbody-element>tbody</a></code> element, inserts it into the table, and returns it.<dt><code><var>table</var>.<span id=dom-table-rows>rows</span></code><dd><p>Returns an <code id=the-table-element:htmlcollection-2><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=the-table-element:the-tr-element-2><a href=#the-tr-element>tr</a></code> elements of the
   table.<dt><code><var>tr</var> = <var>table</var>.<span id=dom-table-insertrow>insertRow</span>([ <var>index</var> ])</code><dd>
    <p>Creates a <code id=the-table-element:the-tr-element-3><a href=#the-tr-element>tr</a></code> element, along with a <code id=the-table-element:the-tbody-element-4><a href=#the-tbody-element>tbody</a></code> if required, inserts them
    into the table at the position given by the argument, and returns the <code id=the-table-element:the-tr-element-4><a href=#the-tr-element>tr</a></code>.</p>

    <p>The position is relative to the rows in the table. The index −1, which is the default
    if the argument is omitted, is equivalent to inserting at the end of the table.</p>

    <p>If the given position is less than −1 or greater than the number of rows, throws an
    <a id=the-table-element:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=the-table-element:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   <dt><code><var>table</var>.<span id=dom-table-deleterow>deleteRow</span>(<var>index</var>)</code><dd>
    <p>Removes the <code id=the-table-element:the-tr-element-5><a href=#the-tr-element>tr</a></code> element with the given position in the table.</p>

    <p>The position is relative to the rows in the table. The index −1 is equivalent to
    deleting the last row of the table.</p>

    <p>If the given position is less than −1 or greater than the index of the last row, or if
    there are no rows, throws an <a id=the-table-element:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a>
    <code id=the-table-element:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   </dl>

  

  <div class=example>

   <p>Here is an example of a table being used to mark up a Sudoku puzzle. Observe the lack of
   headers, which are not necessary in such a table.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
 <c- p>#</c-><c- nn>sudoku</c-> <c- p>{</c-> <c- k>border-collapse</c-><c- p>:</c-> <c- kc>collapse</c-><c- p>;</c-> <c- k>border</c-><c- p>:</c-> <c- kc>solid</c-> <c- kc>thick</c-><c- p>;</c-> <c- p>}</c->
 <c- p>#</c-><c- nn>sudoku</c-> <c- f>colgroup</c-><c- o>,</c-> <c- f>table</c-><c- p>#</c-><c- nn>sudoku</c-> <c- f>tbody</c-> <c- p>{</c-> <c- k>border</c-><c- p>:</c-> <c- kc>solid</c-> <c- kc>medium</c-><c- p>;</c-> <c- p>}</c->
 <c- p>#</c-><c- nn>sudoku</c-> <c- f>td</c-> <c- p>{</c-> <c- k>border</c-><c- p>:</c-> <c- kc>solid</c-> <c- kc>thin</c-><c- p>;</c-> <c- k>height</c-><c- p>:</c-> <c- mf>1.4</c-><c- b>em</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- mf>1.4</c-><c- b>em</c-><c- p>;</c-> <c- k>text-align</c-><c- p>:</c-> <c- kc>center</c-><c- p>;</c-> <c- k>padding</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Today&apos;s Sudoku<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>table</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;sudoku&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>colgroup</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>colgroup</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>colgroup</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 1 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 3 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 6 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 4 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 7 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 9
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 2 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 9 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 1 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 7 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 6
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 2 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 4 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 3 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 9 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 8
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 5 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 9 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 7 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 1
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 6 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 5 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 2
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 7 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 9 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 8 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 2 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 5
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h5 id=table-descriptions-techniques><span class=secno>4.9.1.1</span> Techniques for describing tables<a href=#table-descriptions-techniques class=self-link></a></h5>

  <p id=table-descriptions>For tables that consist of more than just a grid of cells with headers
  in the first row and headers in the first column, and for any table in general where the reader
  might have difficulty understanding the content, authors should include explanatory information
  introducing the table. This information is useful for all users, but is especially useful for
  users who cannot see the table, e.g. users of screen readers.</p>

  <p>Such explanatory information should introduce the purpose of the table, outline its basic cell
  structure, highlight any trends or patterns, and generally teach the user how to use the
  table.</p>

  

  <p>For instance, the following table:</p>

  <table><caption>Characteristics with positive and negative sides</caption><thead><tr><th id=n> Negative
     <th> Characteristic
     <th> Positive
   <tbody><tr><td headers="n r1"> Sad
     <th id=r1> Mood
     <td> Happy
    <tr><td headers="n r2"> Failing
     <th id=r2> Grade
     <td> Passing
  </table>

  <p>...might benefit from a description explaining the way the table is laid out, something like
  "Characteristics are given in the second column, with the negative side in the left column and the
  positive side in the right column".</p>

  <p>There are a variety of ways to include this information, such as:</p>

  <dl><dt>In prose, surrounding the table<dd>
    <div class=example><pre><code class='html'><strong><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->In the following table, characteristics are given in the second
column, with the negative side in the left column and the positive
side in the right column.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>
<c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c->Characteristics with positive and negative sides<c- p>&lt;/</c-><c- f>caption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;n&quot;</c-><c- p>&gt;</c-> Negative
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Characteristic
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Positive
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r1&quot;</c-><c- p>&gt;</c-> Sad
   <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r1&quot;</c-><c- p>&gt;</c-> Mood
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Happy
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r2&quot;</c-><c- p>&gt;</c-> Failing
   <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r2&quot;</c-><c- p>&gt;</c-> Grade
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Passing
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre></div>
   <dt>In the table's <code id=table-descriptions-techniques:the-caption-element><a href=#the-caption-element>caption</a></code><dd>
    <div class=example><pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
<strong> <c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Characteristics with positive and negative sides.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;/</c-><c- f>caption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;n&quot;</c-><c- p>&gt;</c-> Negative
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Characteristic
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Positive
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r1&quot;</c-><c- p>&gt;</c-> Sad
   <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r1&quot;</c-><c- p>&gt;</c-> Mood
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Happy
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r2&quot;</c-><c- p>&gt;</c-> Failing
   <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r2&quot;</c-><c- p>&gt;</c-> Grade
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Passing
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre></div>
   <dt>In the table's <code id=table-descriptions-techniques:the-caption-element-2><a href=#the-caption-element>caption</a></code>, in a <code id=table-descriptions-techniques:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code> element<dd>
    <div class=example><pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Characteristics with positive and negative sides.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c->
<strong>  <c- p>&lt;</c-><c- f>details</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>summary</c-><c- p>&gt;</c->Help<c- p>&lt;/</c-><c- f>summary</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Characteristics are given in the second column, with the
   negative side in the left column and the positive side in the right
   column.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;/</c-><c- f>caption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;n&quot;</c-><c- p>&gt;</c-> Negative
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Characteristic
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Positive
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r1&quot;</c-><c- p>&gt;</c-> Sad
   <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r1&quot;</c-><c- p>&gt;</c-> Mood
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Happy
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r2&quot;</c-><c- p>&gt;</c-> Failing
   <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r2&quot;</c-><c- p>&gt;</c-> Grade
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Passing
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre></div>
   <dt>Next to the table, in the same <code id=table-descriptions-techniques:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code><dd>
    <div class=example><pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Characteristics with positive and negative sides<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<strong> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Characteristics are given in the second column, with the
 negative side in the left column and the positive side in the right
 column.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;n&quot;</c-><c- p>&gt;</c-> Negative
    <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Characteristic
    <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Positive
  <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r1&quot;</c-><c- p>&gt;</c-> Sad
    <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r1&quot;</c-><c- p>&gt;</c-> Mood
    <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Happy
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r2&quot;</c-><c- p>&gt;</c-> Failing
    <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r2&quot;</c-><c- p>&gt;</c-> Grade
    <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Passing
 <c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre></div>
   <dt>Next to the table, in a <code id=table-descriptions-techniques:the-figure-element-2><a href=grouping-content.html#the-figure-element>figure</a></code>'s <code id=table-descriptions-techniques:the-figcaption-element><a href=grouping-content.html#the-figcaption-element>figcaption</a></code><dd>
    <div class=example><pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Characteristics with positive and negative sides<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c->
<strong>  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;n&quot;</c-><c- p>&gt;</c-> Negative
    <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Characteristic
    <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Positive
  <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r1&quot;</c-><c- p>&gt;</c-> Sad
    <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r1&quot;</c-><c- p>&gt;</c-> Mood
    <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Happy
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>td</c-> <c- e>headers</c-><c- o>=</c-><c- s>&quot;n r2&quot;</c-><c- p>&gt;</c-> Failing
    <c- p>&lt;</c-><c- f>th</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r2&quot;</c-><c- p>&gt;</c-> Grade
    <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Passing
 <c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre></div>
   </dl>

  <p>Authors may also use other techniques, or combinations of the above techniques, as
  appropriate.</p>

  <p>The best option, of course, rather than writing a description explaining the way the table is
  laid out, is to adjust the table such that no explanation is needed.</p>

  <div class=example>

   <p>In the case of the table used in the examples above, a simple rearrangement of the table so
   that the headers are on the top and left sides removes the need for an explanation as well as
   removing the need for the use of <code id=table-descriptions-techniques:attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attributes:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c->Characteristics with positive and negative sides<c- p>&lt;/</c-><c- f>caption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Characteristic
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Negative
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Positive
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Mood
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Sad
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Happy
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Grade
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Failing
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Passing
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h5 id=table-layout-techniques><span class=secno>4.9.1.2</span> Techniques for table design<a href=#table-layout-techniques class=self-link></a></h5>

  <p>Good table design is key to making tables more readable and usable.</p>

  <p>In visual media, providing column and row borders and alternating row backgrounds can be very
  effective to make complicated tables more readable.</p>

  <p>For tables with large volumes of numeric content, using monospaced fonts can help users see
  patterns, especially in situations where a user agent does not render the borders. (Unfortunately,
  for historical reasons, not rendering borders on tables is a common default.)</p>

  <p>In speech media, table cells can be distinguished by reporting the corresponding headers before
  reading the cell's contents, and by allowing users to navigate the table in a grid fashion, rather
  than serializing the entire contents of the table in source order.</p>

  <p>Authors are encouraged to use CSS to achieve these effects.</p>

  




  <h4 id=the-caption-element><span class=secno>4.9.2</span> The <dfn data-dfn-type=element><code>caption</code></dfn> element<a href=#the-caption-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption title="The <caption> HTML element specifies the caption (or title) of a table.">Element/caption</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-caption-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-caption-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As the first element child of a <code id=the-caption-element:the-table-element><a href=#the-table-element>table</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-caption-element:concept-element-content-model>Content model</a>:<dd><a id=the-caption-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>, but with no descendant <code id=the-caption-element:the-table-element-2><a href=#the-table-element>table</a></code> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-caption-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-caption-element:the-caption-element><a href=#the-caption-element>caption</a></code> element's <a href=syntax.html#syntax-end-tag id=the-caption-element:syntax-end-tag>end tag</a> can be omitted if
  the <code id=the-caption-element:the-caption-element-2><a href=#the-caption-element>caption</a></code> element is not immediately followed by <a id=the-caption-element:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> or a
  <a href=syntax.html#syntax-comments id=the-caption-element:syntax-comments>comment</a>.<dt><a href=dom.html#concept-element-attributes id=the-caption-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-caption-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-caption-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-caption>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-caption>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-caption-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTableCaptionElement</code>.</dl>

  <p>The <code id=the-caption-element:the-caption-element-3><a href=#the-caption-element>caption</a></code> element <a id=the-caption-element:represents href=dom.html#represents>represents</a> the title of the <code id=the-caption-element:the-table-element-3><a href=#the-table-element>table</a></code>
  that is its parent, if it has a parent and that is a <code id=the-caption-element:the-table-element-4><a href=#the-table-element>table</a></code> element.</p>

  

  <p>When a <code id=the-caption-element:the-table-element-5><a href=#the-table-element>table</a></code> element is the only content in a <code id=the-caption-element:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code> element other
  than the <code id=the-caption-element:the-figcaption-element><a href=grouping-content.html#the-figcaption-element>figcaption</a></code>, the <code id=the-caption-element:the-caption-element-4><a href=#the-caption-element>caption</a></code> element should be omitted in favor of
  the <code id=the-caption-element:the-figcaption-element-2><a href=grouping-content.html#the-figcaption-element>figcaption</a></code>.</p>

  <p>A caption can introduce context for a table, making it significantly easier to understand.</p>

  <div class=example>

   <p>Consider, for instance, the following table:</p>

   <table class=dice-example><tr><th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
    <tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
    <tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
    <tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
    <tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
    <tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
    <tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
   </table>

   <p>In the abstract, this table is not clear. However, with a caption giving the table's number
   (for <a href=dom.html#referenced id=the-caption-element:referenced>reference</a> in the main prose) and explaining its use, it
   makes more sense:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Table 1.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
<c- p>&lt;/</c-><c- f>caption</c-><c- p>&gt;</c-></code></pre>

   <p>This provides the user with more context:</p>

   <table class=dice-example><caption>
     <p>Table 1.
     <p>This table shows the total score obtained from rolling two
     six-sided dice. The first row represents the value of the first
     die, the first column the value of the second die. The total is
     given in the cell that corresponds to the values of the two dice.
    </caption><tr><th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
    <tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
    <tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
    <tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
    <tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
    <tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
    <tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
   </table>

  </div>




  <h4 id=the-colgroup-element><span class=secno>4.9.3</span> The <dfn data-dfn-type=element><code>colgroup</code></dfn> element<a href=#the-colgroup-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup title="The <colgroup> HTML element defines a group of columns within a table.">Element/colgroup</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-colgroup-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-colgroup-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-colgroup-element:the-table-element><a href=#the-table-element>table</a></code> element, after any
   <code id=the-colgroup-element:the-caption-element><a href=#the-caption-element>caption</a></code> elements and before any <code id=the-colgroup-element:the-thead-element><a href=#the-thead-element>thead</a></code>,
   <code id=the-colgroup-element:the-tbody-element><a href=#the-tbody-element>tbody</a></code>, <code id=the-colgroup-element:the-tfoot-element><a href=#the-tfoot-element>tfoot</a></code>, and <code id=the-colgroup-element:the-tr-element><a href=#the-tr-element>tr</a></code>
   elements.<dt><a href=dom.html#concept-element-content-model id=the-colgroup-element:concept-element-content-model>Content model</a>:<dd>If the <code id=the-colgroup-element:attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute is present: <a href=dom.html#concept-content-nothing id=the-colgroup-element:concept-content-nothing>Nothing</a>.<dd>If the <code id=the-colgroup-element:attr-colgroup-span-2><a href=#attr-colgroup-span>span</a></code> attribute is absent: Zero or more <code id=the-colgroup-element:the-col-element><a href=#the-col-element>col</a></code> and <code id=the-colgroup-element:the-template-element><a href=scripting.html#the-template-element>template</a></code> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-colgroup-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-colgroup-element:the-colgroup-element><a href=#the-colgroup-element>colgroup</a></code> element's <a href=syntax.html#syntax-start-tag id=the-colgroup-element:syntax-start-tag>start tag</a> can be
  omitted if the first thing inside the <code id=the-colgroup-element:the-colgroup-element-2><a href=#the-colgroup-element>colgroup</a></code> element is a <code id=the-colgroup-element:the-col-element-2><a href=#the-col-element>col</a></code> element,
  and if the element is not immediately preceded by another <code id=the-colgroup-element:the-colgroup-element-3><a href=#the-colgroup-element>colgroup</a></code> element whose
  <a href=syntax.html#syntax-end-tag id=the-colgroup-element:syntax-end-tag>end tag</a> has been omitted. (It can't be omitted if the element
  is empty.)<dd>A <code id=the-colgroup-element:the-colgroup-element-4><a href=#the-colgroup-element>colgroup</a></code> element's <a href=syntax.html#syntax-end-tag id=the-colgroup-element:syntax-end-tag-2>end tag</a> can be omitted
  if the <code id=the-colgroup-element:the-colgroup-element-5><a href=#the-colgroup-element>colgroup</a></code> element is not immediately followed by <a id=the-colgroup-element:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>
  or a <a href=syntax.html#syntax-comments id=the-colgroup-element:syntax-comments>comment</a>.<dt><a href=dom.html#concept-element-attributes id=the-colgroup-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-colgroup-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-colgroup-element:attr-colgroup-span-3><a href=#attr-colgroup-span>span</a></code> —  Number of columns spanned by the element
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-colgroup-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-colgroup>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-colgroup>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-colgroup-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTableColElement</code>.</dl>

  <p>The <code id=the-colgroup-element:the-colgroup-element-6><a href=#the-colgroup-element>colgroup</a></code> element <a id=the-colgroup-element:represents href=dom.html#represents>represents</a> a <span>group</span> of one or more <span>columns</span> in the <code id=the-colgroup-element:the-table-element-2><a href=#the-table-element>table</a></code> that is its parent, if it has a
  parent and that is a <code id=the-colgroup-element:the-table-element-3><a href=#the-table-element>table</a></code> element.</p>

  <p>If the <code id=the-colgroup-element:the-colgroup-element-7><a href=#the-colgroup-element>colgroup</a></code> element contains no <code id=the-colgroup-element:the-col-element-3><a href=#the-col-element>col</a></code> elements, then the element
  may have a <dfn data-dfn-for=colgroup id=attr-colgroup-span data-dfn-type=element-attr><code>span</code></dfn>
  content attribute specified, whose value must be a <a id=the-colgroup-element:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a> greater
  than zero and less than or equal to 1000.</p>

  


  <h4 id=the-col-element><span class=secno>4.9.4</span> The <dfn data-dfn-type=element><code>col</code></dfn> element<a href=#the-col-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col title="The <col> HTML element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.">Element/col</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-col-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-col-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-col-element:the-colgroup-element><a href=#the-colgroup-element>colgroup</a></code> element that doesn't have
   a <code id=the-col-element:attr-col-span><a href=#attr-col-span>span</a></code> attribute.<dt><a href=dom.html#concept-element-content-model id=the-col-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-col-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-col-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-col-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-col-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-col-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-col-element:attr-col-span-2><a href=#attr-col-span>span</a></code> —  Number of columns spanned by the element
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-col-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-col>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-col>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-col-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTableColElement</code>, as defined for <code id=the-col-element:the-colgroup-element-2><a href=#the-colgroup-element>colgroup</a></code> elements.</dl>

  <p>If a <code id=the-col-element:the-col-element><a href=#the-col-element>col</a></code> element has a parent and that is a <code id=the-col-element:the-colgroup-element-3><a href=#the-colgroup-element>colgroup</a></code> element that
  itself has a parent that is a <code id=the-col-element:the-table-element><a href=#the-table-element>table</a></code> element, then the <code id=the-col-element:the-col-element-2><a href=#the-col-element>col</a></code> element
  <a id=the-col-element:represents href=dom.html#represents>represents</a> one or more <span>columns</span> in the <span>column group</span> represented by that <code id=the-col-element:the-colgroup-element-4><a href=#the-colgroup-element>colgroup</a></code>.</p>

  <p>The element may have a <dfn data-dfn-for=col id=attr-col-span data-dfn-type=element-attr><code>span</code></dfn> content attribute specified, whose value must be a
  <a id=the-col-element:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a> greater than zero and less than or equal to 1000.</p>

  


  <h4 id=the-tbody-element><span class=secno>4.9.5</span> The <dfn data-dfn-type=element><code>tbody</code></dfn> element<a href=#the-tbody-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody title="The <tbody> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>).">Element/tbody</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-tbody-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-tbody-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-tbody-element:the-table-element><a href=#the-table-element>table</a></code> element, after any
   <code id=the-tbody-element:the-caption-element><a href=#the-caption-element>caption</a></code>, <code id=the-tbody-element:the-colgroup-element><a href=#the-colgroup-element>colgroup</a></code>, and
   <code id=the-tbody-element:the-thead-element><a href=#the-thead-element>thead</a></code> elements, but only if there are no
   <code id=the-tbody-element:the-tr-element><a href=#the-tr-element>tr</a></code> elements that are children of the
   <code id=the-tbody-element:the-table-element-2><a href=#the-table-element>table</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-tbody-element:concept-element-content-model>Content model</a>:<dd>Zero or more <code id=the-tbody-element:the-tr-element-2><a href=#the-tr-element>tr</a></code> and <a href=dom.html#script-supporting-elements-2 id=the-tbody-element:script-supporting-elements-2>script-supporting</a> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-tbody-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-tbody-element:the-tbody-element><a href=#the-tbody-element>tbody</a></code> element's <a href=syntax.html#syntax-start-tag id=the-tbody-element:syntax-start-tag>start tag</a> can be omitted
  if the first thing inside the <code id=the-tbody-element:the-tbody-element-2><a href=#the-tbody-element>tbody</a></code> element is a <code id=the-tbody-element:the-tr-element-3><a href=#the-tr-element>tr</a></code> element, and if the
  element is not immediately preceded by a <code id=the-tbody-element:the-tbody-element-3><a href=#the-tbody-element>tbody</a></code>, <code id=the-tbody-element:the-thead-element-2><a href=#the-thead-element>thead</a></code>, or
  <code id=the-tbody-element:the-tfoot-element><a href=#the-tfoot-element>tfoot</a></code> element whose <a href=syntax.html#syntax-end-tag id=the-tbody-element:syntax-end-tag>end tag</a> has been omitted. (It
  can't be omitted if the element is empty.)<dd>A <code id=the-tbody-element:the-tbody-element-4><a href=#the-tbody-element>tbody</a></code> element's <a href=syntax.html#syntax-end-tag id=the-tbody-element:syntax-end-tag-2>end tag</a> can be omitted if
  the <code id=the-tbody-element:the-tbody-element-5><a href=#the-tbody-element>tbody</a></code> element is immediately followed by a <code id=the-tbody-element:the-tbody-element-6><a href=#the-tbody-element>tbody</a></code> or
  <code id=the-tbody-element:the-tfoot-element-2><a href=#the-tfoot-element>tfoot</a></code> element, or if there is no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-tbody-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-tbody-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-tbody-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-tbody>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-tbody>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-tbody-element:concept-element-dom>DOM interface</a>:<dd>
    
    <p><span>Uses <code>HTMLTableSectionElement</code>. </span>The
    <code>HTMLTableSectionElement</code> interface is also used for <code id=the-tbody-element:the-thead-element-3><a href=#the-thead-element>thead</a></code> and
    <code id=the-tbody-element:the-tfoot-element-3><a href=#the-tfoot-element>tfoot</a></code> elements.</p>
   </dl>

  <p>The <code id=the-tbody-element:the-tbody-element-7><a href=#the-tbody-element>tbody</a></code> element <a id=the-tbody-element:represents href=dom.html#represents>represents</a> a <span>block</span> of <span>rows</span> that consist of a
  body of data for the parent <code id=the-tbody-element:the-table-element-3><a href=#the-table-element>table</a></code> element, if the <code id=the-tbody-element:the-tbody-element-8><a href=#the-tbody-element>tbody</a></code> element has a
  parent and it is a <code id=the-tbody-element:the-table-element-4><a href=#the-table-element>table</a></code>.</p>

  

  <dl class=domintro><dt><code><var>tbody</var>.<span id=dom-tbody-rows>rows</span></code><dd>
    <p>Returns an <code id=the-tbody-element:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=the-tbody-element:the-tr-element-4><a href=#the-tr-element>tr</a></code> elements of the table
    section.</p>
   <dt><code><var>tr</var> = <var>tbody</var>.<span id=dom-tbody-insertrow>insertRow</span>([ <var>index</var> ])</code><dd>
    <p>Creates a <code id=the-tbody-element:the-tr-element-5><a href=#the-tr-element>tr</a></code> element, inserts it into the table section at the position given by
    the argument, and returns the <code id=the-tbody-element:the-tr-element-6><a href=#the-tr-element>tr</a></code>.</p>

    <p>The position is relative to the rows in the table section. The index −1, which is the
    default if the argument is omitted, is equivalent to inserting at the end of the table
    section.</p>

    <p>If the given position is less than −1 or greater than the number of rows, throws an
    <a id=the-tbody-element:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=the-tbody-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   <dt><code><var>tbody</var>.<span id=dom-tbody-deleterow>deleteRow</span>(<var>index</var>)</code><dd>
    <p>Removes the <code id=the-tbody-element:the-tr-element-7><a href=#the-tr-element>tr</a></code> element with the given position in the table section.</p>

    <p>The position is relative to the rows in the table section. The index −1 is equivalent
    to deleting the last row of the table section.</p>

    <p>If the given position is less than −1 or greater than the index of the last row, or if
    there are no rows, throws an <a id=the-tbody-element:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a>
    <code id=the-tbody-element:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   </dl>

  


  <h4 id=the-thead-element><span class=secno>4.9.6</span> The <dfn data-dfn-type=element><code>thead</code></dfn> element<a href=#the-thead-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead title="The <thead> HTML element defines a set of rows defining the head of the columns of the table.">Element/thead</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-thead-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-thead-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-thead-element:the-table-element><a href=#the-table-element>table</a></code> element, after any
   <code id=the-thead-element:the-caption-element><a href=#the-caption-element>caption</a></code>, and <code id=the-thead-element:the-colgroup-element><a href=#the-colgroup-element>colgroup</a></code>
   elements and before any <code id=the-thead-element:the-tbody-element><a href=#the-tbody-element>tbody</a></code>, <code id=the-thead-element:the-tfoot-element><a href=#the-tfoot-element>tfoot</a></code>, and
   <code id=the-thead-element:the-tr-element><a href=#the-tr-element>tr</a></code> elements, but only if there are no other
   <code id=the-thead-element:the-thead-element><a href=#the-thead-element>thead</a></code> elements that are children of the
   <code id=the-thead-element:the-table-element-2><a href=#the-table-element>table</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-thead-element:concept-element-content-model>Content model</a>:<dd>Zero or more <code id=the-thead-element:the-tr-element-2><a href=#the-tr-element>tr</a></code> and <a href=dom.html#script-supporting-elements-2 id=the-thead-element:script-supporting-elements-2>script-supporting</a> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-thead-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-thead-element:the-thead-element-2><a href=#the-thead-element>thead</a></code> element's <a href=syntax.html#syntax-end-tag id=the-thead-element:syntax-end-tag>end tag</a> can be omitted if
  the <code id=the-thead-element:the-thead-element-3><a href=#the-thead-element>thead</a></code> element is immediately followed by a <code id=the-thead-element:the-tbody-element-2><a href=#the-tbody-element>tbody</a></code> or
  <code id=the-thead-element:the-tfoot-element-2><a href=#the-tfoot-element>tfoot</a></code> element.<dt><a href=dom.html#concept-element-attributes id=the-thead-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-thead-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-thead-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-thead>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-thead>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-thead-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTableSectionElement</code>, as defined for <code id=the-thead-element:the-tbody-element-3><a href=#the-tbody-element>tbody</a></code> elements.</dl>

  <p>The <code id=the-thead-element:the-thead-element-4><a href=#the-thead-element>thead</a></code> element <a id=the-thead-element:represents href=dom.html#represents>represents</a> the <span>block</span> of <span>rows</span> that consist of
  the column labels (headers) and any ancillary non-header cells for the parent <code id=the-thead-element:the-table-element-3><a href=#the-table-element>table</a></code>
  element, if the <code id=the-thead-element:the-thead-element-5><a href=#the-thead-element>thead</a></code> element has a parent and it is a <code id=the-thead-element:the-table-element-4><a href=#the-table-element>table</a></code>.</p>

  

  <div class=example>

   <p>This example shows a <code id=the-thead-element:the-thead-element-6><a href=#the-thead-element>thead</a></code> element being used. Notice the use of both
   <code id=the-thead-element:the-th-element><a href=#the-th-element>th</a></code> and <code id=the-thead-element:the-td-element><a href=#the-td-element>td</a></code> elements in the <code id=the-thead-element:the-thead-element-7><a href=#the-thead-element>thead</a></code> element: the first row is
   the headers, and the second row is an explanation of how to fill in the table.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c-> School auction sign-up sheet <c- p>&lt;/</c-><c- f>caption</c-><c- p>&gt;</c->
<strong> <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>e1</c-><c- p>&gt;</c->Name<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>e2</c-><c- p>&gt;</c->Product<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>e3</c-><c- p>&gt;</c->Picture<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>e4</c-><c- p>&gt;</c->Price<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Your name here
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->What are you selling?
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Link to a picture
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Your reserve price
</strong> <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Ms Danus
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Doughnuts
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://example.com/mydoughnuts.png&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Doughnuts from Ms Danus&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->$45
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>e1</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>who</c-> <c- e>required</c-> <c- e>form</c-><c- o>=</c-><c- s>f</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>e2</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>what</c-> <c- e>required</c-> <c- e>form</c-><c- o>=</c-><c- s>f</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>e3</c-> <c- e>type</c-><c- o>=</c-><c- s>url</c-> <c- e>name</c-><c- o>=</c-><c- s>pic</c-> <c- e>form</c-><c- o>=</c-><c- s>f</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>e4</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>step</c-><c- o>=</c-><c- s>0.01</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>value</c-><c- o>=</c-><c- s>0</c-> <c- e>required</c-> <c- e>form</c-><c- o>=</c-><c- s>f</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>form</c-> <c- e>id</c-><c- o>=</c-><c- s>f</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/auction.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c-> <c- e>name</c-><c- o>=</c-><c- s>add</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Submit&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-tfoot-element><span class=secno>4.9.7</span> The <dfn data-dfn-type=element><code>tfoot</code></dfn> element<a href=#the-tfoot-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot title="The <tfoot> HTML element defines a set of rows summarizing the columns of the table.">Element/tfoot</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-tfoot-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-tfoot-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-tfoot-element:the-table-element><a href=#the-table-element>table</a></code> element, after any
   <code id=the-tfoot-element:the-caption-element><a href=#the-caption-element>caption</a></code>, <code id=the-tfoot-element:the-colgroup-element><a href=#the-colgroup-element>colgroup</a></code>, <code id=the-tfoot-element:the-thead-element><a href=#the-thead-element>thead</a></code>,
   <code id=the-tfoot-element:the-tbody-element><a href=#the-tbody-element>tbody</a></code>, and <code id=the-tfoot-element:the-tr-element><a href=#the-tr-element>tr</a></code> elements, but only if there
   are no other <code id=the-tfoot-element:the-tfoot-element><a href=#the-tfoot-element>tfoot</a></code> elements that are children of the
   <code id=the-tfoot-element:the-table-element-2><a href=#the-table-element>table</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-tfoot-element:concept-element-content-model>Content model</a>:<dd>Zero or more <code id=the-tfoot-element:the-tr-element-2><a href=#the-tr-element>tr</a></code> and <a href=dom.html#script-supporting-elements-2 id=the-tfoot-element:script-supporting-elements-2>script-supporting</a> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-tfoot-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-tfoot-element:the-tfoot-element-2><a href=#the-tfoot-element>tfoot</a></code> element's <a href=syntax.html#syntax-end-tag id=the-tfoot-element:syntax-end-tag>end tag</a> can be omitted if
  there is no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-tfoot-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-tfoot-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-tfoot-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-tfoot>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-tfoot>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-tfoot-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTableSectionElement</code>, as defined for <code id=the-tfoot-element:the-tbody-element-2><a href=#the-tbody-element>tbody</a></code> elements.</dl>

  <p>The <code id=the-tfoot-element:the-tfoot-element-3><a href=#the-tfoot-element>tfoot</a></code> element <a id=the-tfoot-element:represents href=dom.html#represents>represents</a> the <span>block</span> of <span>rows</span> that consist of
  the column summaries (footers) for the parent <code id=the-tfoot-element:the-table-element-3><a href=#the-table-element>table</a></code> element, if the
  <code id=the-tfoot-element:the-tfoot-element-4><a href=#the-tfoot-element>tfoot</a></code> element has a parent and it is a <code id=the-tfoot-element:the-table-element-4><a href=#the-table-element>table</a></code>.</p>

  


  <h4 id=the-tr-element><span class=secno>4.9.8</span> The <dfn data-dfn-type=element><code>tr</code></dfn> element<a href=#the-tr-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr title="The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.">Element/tr</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-tr-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-tr-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-tr-element:the-thead-element><a href=#the-thead-element>thead</a></code> element.<dd>As a child of a <code id=the-tr-element:the-tbody-element><a href=#the-tbody-element>tbody</a></code> element.<dd>As a child of a <code id=the-tr-element:the-tfoot-element><a href=#the-tfoot-element>tfoot</a></code> element.<dd>As a child of a <code id=the-tr-element:the-table-element><a href=#the-table-element>table</a></code> element, after any
   <code id=the-tr-element:the-caption-element><a href=#the-caption-element>caption</a></code>, <code id=the-tr-element:the-colgroup-element><a href=#the-colgroup-element>colgroup</a></code>, and <code id=the-tr-element:the-thead-element-2><a href=#the-thead-element>thead</a></code>
   elements, but only if there are no <code id=the-tr-element:the-tbody-element-2><a href=#the-tbody-element>tbody</a></code> elements that
   are children of the <code id=the-tr-element:the-table-element-2><a href=#the-table-element>table</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-tr-element:concept-element-content-model>Content model</a>:<dd>Zero or more <code id=the-tr-element:the-td-element><a href=#the-td-element>td</a></code>, <code id=the-tr-element:the-th-element><a href=#the-th-element>th</a></code>, and <a href=dom.html#script-supporting-elements-2 id=the-tr-element:script-supporting-elements-2>script-supporting</a> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-tr-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-tr-element:the-tr-element><a href=#the-tr-element>tr</a></code> element's <a href=syntax.html#syntax-end-tag id=the-tr-element:syntax-end-tag>end tag</a> can be omitted if the
  <code id=the-tr-element:the-tr-element-2><a href=#the-tr-element>tr</a></code> element is immediately followed by another <code id=the-tr-element:the-tr-element-3><a href=#the-tr-element>tr</a></code> element, or if there is
  no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-tr-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-tr-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-tr-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-tr>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-tr>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-tr-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTableRowElement</code>.</dl>

  <p>The <code id=the-tr-element:the-tr-element-4><a href=#the-tr-element>tr</a></code> element <a id=the-tr-element:represents href=dom.html#represents>represents</a> a <span>row</span> of
  <span>cells</span> in a <span>table</span>.</p>

  

  <dl class=domintro><dt><code><var>tr</var>.<span id=dom-tr-rowindex>rowIndex</span></code><dd>
    <p>Returns the position of the row in the table's <code id=the-tr-element:dom-table-rows><a href=#dom-table-rows>rows</a></code>
    list.</p>

    <p>Returns −1 if the element isn't in a table.</p>
   <dt><code><var>tr</var>.<span id=dom-tr-sectionrowindex>sectionRowIndex</span></code><dd>
    <p>Returns the position of the row in the table section's <code id=the-tr-element:dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> list.</p>

    <p>Returns −1 if the element isn't in a table section.</p>
   <dt><code><var>tr</var>.<span id=dom-tr-cells>cells</span></code><dd>
    <p>Returns an <code id=the-tr-element:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=the-tr-element:the-td-element-2><a href=#the-td-element>td</a></code> and <code id=the-tr-element:the-th-element-2><a href=#the-th-element>th</a></code> elements of
    the row.</p>
   <dt><code><var>cell</var> = <var>tr</var>.<span id=dom-tr-insertcell>insertCell</span>([ <var>index</var> ])</code><dd>
    <p>Creates a <code id=the-tr-element:the-td-element-3><a href=#the-td-element>td</a></code> element, inserts it into the table row at the position given by the
    argument, and returns the <code id=the-tr-element:the-td-element-4><a href=#the-td-element>td</a></code>.</p>

    <p>The position is relative to the cells in the row. The index −1, which is the default
    if the argument is omitted, is equivalent to inserting at the end of the row.</p>

    <p>If the given position is less than −1 or greater than the number of cells, throws an
    <a id=the-tr-element:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=the-tr-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   <dt><code><var>tr</var>.<span id=dom-tr-deletecell>deleteCell</span>(<var>index</var>)</code><dd>
    <p>Removes the <code id=the-tr-element:the-td-element-5><a href=#the-td-element>td</a></code> or <code id=the-tr-element:the-th-element-3><a href=#the-th-element>th</a></code> element with the given position in the
    row.</p>

    <p>The position is relative to the cells in the row. The index −1 is equivalent to
    deleting the last cell of the row.</p>

    <p>If the given position is less than −1 or greater than the index of the last cell, or
    if there are no cells, throws an <a id=the-tr-element:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a>
    <code id=the-tr-element:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   </dl>

  


  <h4 id=the-td-element><span class=secno>4.9.9</span> The <dfn data-dfn-type=element><code>td</code></dfn> element<a href=#the-td-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td title="The <td> HTML element defines a cell of a table that contains data. It participates in the table model.">Element/td</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-td-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-td-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-td-element:the-tr-element><a href=#the-tr-element>tr</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-td-element:concept-element-content-model>Content model</a>:<dd><a id=the-td-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-td-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-td-element:the-td-element><a href=#the-td-element>td</a></code> element's <a href=syntax.html#syntax-end-tag id=the-td-element:syntax-end-tag>end tag</a> can be omitted if the
  <code id=the-td-element:the-td-element-2><a href=#the-td-element>td</a></code> element is immediately followed by a <code id=the-td-element:the-td-element-3><a href=#the-td-element>td</a></code> or <code id=the-td-element:the-th-element><a href=#the-th-element>th</a></code> element,
  or if there is no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-td-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-td-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-td-element:attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code> —  Number of columns that the cell is to span
     <dd><code id=the-td-element:attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code> —  Number of rows that the cell is to span
     <dd><code id=the-td-element:attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> —  The header cells for this cell
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-td-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-td>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-td>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-td-element:concept-element-dom>DOM interface</a>:<dd>
    

    <p><span>Uses <code>HTMLTableCellElement</code>. </span>The
    <code>HTMLTableCellElement</code> interface is also used for <code id=the-td-element:the-th-element-2><a href=#the-th-element>th</a></code> elements.</p>
   </dl>

  <p>The <code id=the-td-element:the-td-element-4><a href=#the-td-element>td</a></code> element <a id=the-td-element:represents href=dom.html#represents>represents</a> a data <span>cell</span> in a table.</p>

  

  <div class=example>

   <p>In this example, we see a snippet of a web application consisting of a grid of editable cells
   (essentially a simple spreadsheet). One of the cells has been configured to show the sum of the
   cells above it. Three have been marked as headings, which use <code id=the-td-element:the-th-element-3><a href=#the-th-element>th</a></code> elements instead of
   <code id=the-td-element:the-td-element-5><a href=#the-td-element>td</a></code> elements. A script would attach event handlers to these elements to maintain the
   total.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Name&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Paid ($)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Jeff&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;14&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Britta&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;9&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Abed&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;25&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Shirley&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;2&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Annie&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;5&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Troy&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;5&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Pierce&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1000&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Total&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>output</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1060&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-th-element><span class=secno>4.9.10</span> The <dfn data-dfn-type=element><code>th</code></dfn> element<a href=#the-th-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th title="The <th> HTML element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.">Element/th</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-th-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-th-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-th-element:the-tr-element><a href=#the-tr-element>tr</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-th-element:concept-element-content-model>Content model</a>:<dd><a id=the-th-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>, but with no <code id=the-th-element:the-header-element><a href=sections.html#the-header-element>header</a></code>, <code id=the-th-element:the-footer-element><a href=sections.html#the-footer-element>footer</a></code>,
   <a id=the-th-element:sectioning-content-2 href=dom.html#sectioning-content-2>sectioning content</a>, or <a id=the-th-element:heading-content-2 href=dom.html#heading-content-2>heading content</a> descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-th-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-th-element:the-th-element><a href=#the-th-element>th</a></code> element's <a href=syntax.html#syntax-end-tag id=the-th-element:syntax-end-tag>end tag</a> can be omitted if the
  <code id=the-th-element:the-th-element-2><a href=#the-th-element>th</a></code> element is immediately followed by a <code id=the-th-element:the-td-element><a href=#the-td-element>td</a></code> or <code id=the-th-element:the-th-element-3><a href=#the-th-element>th</a></code> element,
  or if there is no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-th-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-th-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-th-element:attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code> —  Number of columns that the cell is to span
     <dd><code id=the-th-element:attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code> —  Number of rows that the cell is to span
     <dd><code id=the-th-element:attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> —  The header cells for this cell
     <dd><code id=the-th-element:attr-th-scope><a href=#attr-th-scope>scope</a></code> —  Specifies which cells the header cell applies to
     <dd><code id=the-th-element:attr-th-abbr><a href=#attr-th-abbr>abbr</a></code> —  Alternative label to use for the header cell when referencing the cell in other contexts
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-th-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-th>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-th>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-th-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTableCellElement</code>, as defined for <code id=the-th-element:the-td-element-2><a href=#the-td-element>td</a></code> elements.</dl>

  <p>The <code id=the-th-element:the-th-element-4><a href=#the-th-element>th</a></code> element <a id=the-th-element:represents href=dom.html#represents>represents</a> a header <span>cell</span> in a table.</p>

  <p>The <code id=the-th-element:the-th-element-5><a href=#the-th-element>th</a></code> element may have a <dfn data-dfn-for=th id=attr-th-scope data-dfn-type=element-attr><code>scope</code></dfn> content attribute specified.</p>

  <p>The <code id=the-th-element:attr-th-scope-2><a href=#attr-th-scope>scope</a></code> attribute is an <a id=the-th-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a>
  with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=th/scope id=attr-th-scope-row data-dfn-type=attr-value><code>row</code></dfn>
     <td><dfn id=attr-th-scope-row-state>Row</dfn>
     <td>The header cell applies to some of the subsequent cells in the same row(s).
    <tr><td><dfn data-dfn-for=th/scope id=attr-th-scope-col data-dfn-type=attr-value><code>col</code></dfn>
     <td><dfn id=attr-th-scope-column-state>Column</dfn>
     <td>The header cell applies to some of the subsequent cells in the same column(s).
    <tr><td><dfn data-dfn-for=th/scope id=attr-th-scope-rowgroup data-dfn-type=attr-value><code>rowgroup</code></dfn>
     <td><dfn id=attr-th-scope-rowgroup-state>Row Group</dfn>
     <td>The header cell applies to all the remaining cells in the row group.
    <tr><td><dfn data-dfn-for=th/scope id=attr-th-scope-colgroup data-dfn-type=attr-value><code>colgroup</code></dfn>
     <td><dfn id=attr-th-scope-colgroup-state>Column Group</dfn>
     <td>The header cell applies to all the remaining cells in the column group.
  </table>

  <p>The attribute's <i id=the-th-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-th-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <dfn id=attr-th-scope-auto-state>Auto</dfn> state. (In this state the header cell applies to a
  set of cells selected based on context.)</p>

  <p>A <code id=the-th-element:the-th-element-6><a href=#the-th-element>th</a></code> element's <code id=the-th-element:attr-th-scope-3><a href=#attr-th-scope>scope</a></code> attribute must not be in
  the <a href=#attr-th-scope-rowgroup-state id=the-th-element:attr-th-scope-rowgroup-state>Row Group</a> state if the element is not anchored in
  a <span>row group</span>, nor in the <a href=#attr-th-scope-colgroup-state id=the-th-element:attr-th-scope-colgroup-state>Column Group</a> state if the element is not anchored in a
  <span>column group</span>.

  <p>The <code id=the-th-element:the-th-element-7><a href=#the-th-element>th</a></code> element may have an <dfn data-dfn-for=th id=attr-th-abbr data-dfn-type=element-attr><code>abbr</code></dfn> content attribute specified. Its value must be an
  alternative label for the header cell, to be used when referencing the cell in other contexts
  (e.g. when describing the header cells that apply to a data cell). It is typically an abbreviated
  form of the full header cell, but can also be an expansion, or merely a different phrasing.</p>

  

  <div class=example>

   <p>The following example shows how the <code id=the-th-element:attr-th-scope-4><a href=#attr-th-scope>scope</a></code> attribute's <code id=the-th-element:attr-th-scope-rowgroup><a href=#attr-th-scope-rowgroup>rowgroup</a></code> value affects which data cells a header cell
   applies to.</p>

   <p>Here is a markup fragment showing a table:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> ID <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Measurement <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Average <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Maximum
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-> <c- e>scope</c-><c- o>=</c-><c- s>rowgroup</c-><c- p>&gt;</c-> Cats <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 93 <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Legs <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 3.5 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 4
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 10 <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Tails <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 1 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 1
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-> <c- e>scope</c-><c- o>=</c-><c- s>rowgroup</c-><c- p>&gt;</c-> English speakers <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 32 <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Legs <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 2.67 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 4
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 35 <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Tails <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 0.33 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 1
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

   <p>This would result in the following table:</p>

   <table><thead><tr><th> ID <th> Measurement <th> Average <th> Maximum
    <tbody><tr><td> <th scope=rowgroup> Cats <td> <td>
     <tr><td> 93 <th> Legs <td> 3.5 <td> 4
     <tr><td> 10 <th> Tails <td> 1 <td> 1
    <tbody><tr><td> <th scope=rowgroup> English speakers <td> <td>
     <tr><td> 32 <th> Legs <td> 2.67 <td> 4
     <tr><td> 35 <th> Tails <td> 0.33 <td> 1
   </table>

   <p>The headers in the first row all apply directly down to the rows in their column.</p>

   <p>The headers with a <code id=the-th-element:attr-th-scope-5><a href=#attr-th-scope>scope</a></code> attribute in the <a href=#attr-th-scope-rowgroup-state id=the-th-element:attr-th-scope-rowgroup-state-2>Row Group</a> state apply to all the cells in their row
   group other than the cells in the first column.</p>

   <p>The remaining headers apply just to the cells to the right of them.</p>

   
   <img alt="" src=../images/table-scope-diagram.png width=459 height=256>

  </div>



  <h4 id=attributes-common-to-td-and-th-elements><span class=secno>4.9.11</span> Attributes common to <code id=attributes-common-to-td-and-th-elements:the-td-element><a href=#the-td-element>td</a></code> and <code id=attributes-common-to-td-and-th-elements:the-th-element><a href=#the-th-element>th</a></code> elements<a href=#attributes-common-to-td-and-th-elements class=self-link></a></h4>

  <p>The <code id=attributes-common-to-td-and-th-elements:the-td-element-2><a href=#the-td-element>td</a></code> and <code id=attributes-common-to-td-and-th-elements:the-th-element-2><a href=#the-th-element>th</a></code> elements may have a <dfn data-dfn-for=td,th id=attr-tdth-colspan data-dfn-type=element-attr><code>colspan</code></dfn> content attribute specified, whose value must be a
  <a id=attributes-common-to-td-and-th-elements:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a> greater than zero and less than or equal to 1000.</p>

  <p>The <code id=attributes-common-to-td-and-th-elements:the-td-element-3><a href=#the-td-element>td</a></code> and <code id=attributes-common-to-td-and-th-elements:the-th-element-3><a href=#the-th-element>th</a></code> elements may also have a <dfn data-dfn-for=td,th id=attr-tdth-rowspan data-dfn-type=element-attr><code>rowspan</code></dfn> content attribute specified,
  whose value must be a <a id=attributes-common-to-td-and-th-elements:valid-non-negative-integer-2 href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a> less than or equal to 65534.  For
  this attribute, the value zero means that the cell is to span all the remaining rows in the row
  group.</p> 

  <p>These attributes give the number of columns and rows respectively that the cell is to span.
  These attributes must not be used to overlap cells.</p> 

  <hr>

  <p>The <code id=attributes-common-to-td-and-th-elements:the-td-element-4><a href=#the-td-element>td</a></code> and <code id=attributes-common-to-td-and-th-elements:the-th-element-4><a href=#the-th-element>th</a></code> element may have a <dfn data-dfn-for=td,th id=attr-tdth-headers data-dfn-type=element-attr><code>headers</code></dfn> content attribute specified. The <code id=attributes-common-to-td-and-th-elements:attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if specified, must contain a string
  consisting of an <a id=attributes-common-to-td-and-th-elements:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>, none of which are
  <a id=attributes-common-to-td-and-th-elements:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> another token and each of which must have the value of an <a href=https://dom.spec.whatwg.org/#concept-id id=attributes-common-to-td-and-th-elements:concept-id data-x-internal=concept-id>ID</a> of a <code id=attributes-common-to-td-and-th-elements:the-th-element-5><a href=#the-th-element>th</a></code> element taking part in the same <span>table</span> as the <code id=attributes-common-to-td-and-th-elements:the-td-element-5><a href=#the-td-element>td</a></code> or <code id=attributes-common-to-td-and-th-elements:the-th-element-6><a href=#the-th-element>th</a></code> element.</p>

  <p>A <code id=attributes-common-to-td-and-th-elements:the-th-element-7><a href=#the-th-element>th</a></code> element with <a href=https://dom.spec.whatwg.org/#concept-id id=attributes-common-to-td-and-th-elements:concept-id-2 data-x-internal=concept-id>ID</a> <var>id</var> is
  said to be <i>directly targeted</i> by all <code id=attributes-common-to-td-and-th-elements:the-td-element-6><a href=#the-td-element>td</a></code> and <code id=attributes-common-to-td-and-th-elements:the-th-element-8><a href=#the-th-element>th</a></code> elements in the
  same <span>table</span> that have <code id=attributes-common-to-td-and-th-elements:attr-tdth-headers-2><a href=#attr-tdth-headers>headers</a></code> attributes whose values include as one of their tokens
  the <a href=https://dom.spec.whatwg.org/#concept-id id=attributes-common-to-td-and-th-elements:concept-id-3 data-x-internal=concept-id>ID</a> <var>id</var>. A <code id=attributes-common-to-td-and-th-elements:the-th-element-9><a href=#the-th-element>th</a></code> element <var>A</var> is said to be <i>targeted</i> by a <code id=attributes-common-to-td-and-th-elements:the-th-element-10><a href=#the-th-element>th</a></code> or <code id=attributes-common-to-td-and-th-elements:the-td-element-7><a href=#the-td-element>td</a></code> element
  <var>B</var> if either <var>A</var> is <i>directly targeted</i> by <var>B</var> or if there exists an element <var>C</var> that is itself
  <i>targeted</i> by the element <var>B</var> and <var>A</var> is <i>directly
  targeted</i> by <var>C</var>.</p>

  <p>A <code id=attributes-common-to-td-and-th-elements:the-th-element-11><a href=#the-th-element>th</a></code> element must not be <i>targeted</i> by itself.</p>

  

  <hr>

  <dl class=domintro><dt><code><var>cell</var>.<span id=dom-tdth-cellindex>cellIndex</span></code><dd>
    <p>Returns the position of the cell in the row's <code id=attributes-common-to-td-and-th-elements:dom-tr-cells><a href=#dom-tr-cells>cells</a></code> list.
    This does not necessarily correspond to the <var>x</var>-position of the cell in the table,
    since earlier cells might cover multiple rows or columns.</p>

    <p>Returns −1 if the element isn't in a row.</p>
   </dl>

  


  

  <h4 id=table-examples><span class=secno>4.9.12</span> Examples<a href=#table-examples class=self-link></a></h4>

  

  <p>The following shows how one might mark up the bottom part of table 45 of the <cite>Smithsonian
  physical tables, Volume 71</cite>:</p>

   
   
  <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c->Specification values: <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Steel<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->, <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Castings<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->,
 Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.<c- p>&lt;/</c-><c- f>caption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-> <c- e>rowspan</c-><c- o>=</c-><c- s>2</c-><c- p>&gt;</c->Grade.<c- p>&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-> <c- e>rowspan</c-><c- o>=</c-><c- s>2</c-><c- p>&gt;</c->Yield Point.<c- p>&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-> <c- e>colspan</c-><c- o>=</c-><c- s>2</c-><c- p>&gt;</c->Ultimate tensile strength<c- p>&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-> <c- e>rowspan</c-><c- o>=</c-><c- s>2</c-><c- p>&gt;</c->Per cent elong. 50.8<c- ni>&amp;nbsp;</c->mm or 2<c- ni>&amp;nbsp;</c->in.<c- p>&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-> <c- e>rowspan</c-><c- o>=</c-><c- s>2</c-><c- p>&gt;</c->Per cent reduct. area.<c- p>&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->kg/mm<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>sup</c-><c- p>&gt;&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->lb/in<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>sup</c-><c- p>&gt;&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>thead</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Hard<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->0.45 ultimate<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->56.2<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->80,000<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->15<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->20<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Medium<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->0.45 ultimate<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->49.2<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->70,000<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->18<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->25<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Soft<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->0.45 ultimate<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->42.2<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->60,000<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->22<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->30<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>tbody</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

  <p>This table could look like this:</p>

  <table id=table-example-1><caption>Specification values: <b>Steel</b>, <b>Castings</b>,
   Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption><thead><tr><th rowspan=2>Grade.<th rowspan=2>Yield Point.<th colspan=2>Ultimate tensile strength<th rowspan=2>Per cent elong. 50.8 mm or 2 in.<th rowspan=2>Per cent reduct. area.<tr><th>kg/mm<sup>2</sup><th>lb/in<sup>2</sup><tbody><tr><td>Hard<td>0.45 ultimate<td>56.2<td>80,000<td>15<td>20<tr><td>Medium<td>0.45 ultimate<td>49.2<td>70,000<td>18<td>25<tr><td>Soft<td>0.45 ultimate<td>42.2<td>60,000<td>22<td>30</table>

  <hr>

  <p>The following shows how one might mark up the gross margin table on page 46 of Apple, Inc's
  10-K filing for fiscal year 2008:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->2008
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->2007
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->2006
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Net sales
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->$ 32,479
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->$ 24,006
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->$ 19,315
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Cost of sales
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->  21,334
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->  15,852
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->  13,717
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Gross margin
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->$ 11,145
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->$  8,154
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->$  5,598
 <c- p>&lt;</c-><c- f>tfoot</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Gross margin percentage
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->34.3%
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->34.0%
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->29.0%
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

  <p>This table could look like this:</p>

  <table class="apple-table-examples e1"><thead><tr><th>
     <th>2008
     <th>2007
     <th>2006
   <tbody><tr><th>Net sales
     <td>$ 32,479
     <td>$ 24,006
     <td>$ 19,315
    <tr><th>Cost of sales
     <td>  21,334
     <td>  15,852
     <td>  13,717
   <tbody><tr><th>Gross margin
     <td>$ 11,145
     <td>$  8,154
     <td>$  5,598
   <tfoot><tr><th>Gross margin percentage
     <td>34.3%
     <td>34.0%
     <td>29.0%
  </table>

  <hr>

  <p>The following shows how one might mark up the operating expenses table from lower on the same
  page of that document:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>colgroup</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>col</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>colgroup</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>col</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>col</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>col</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->2008 <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->2007 <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->2006
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-> <c- e>scope</c-><c- o>=</c-><c- s>rowgroup</c-><c- p>&gt;</c-> Research and development
       <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $ 1,109 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $ 782 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $ 712
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-> <c- e>scope</c-><c- o>=</c-><c- s>row</c-><c- p>&gt;</c-> Percentage of net sales
       <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 3.4% <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 3.3% <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 3.7%
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-> <c- e>scope</c-><c- o>=</c-><c- s>rowgroup</c-><c- p>&gt;</c-> Selling, general, and administrative
       <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $ 3,761 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $ 2,963 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $ 2,433
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-> <c- e>scope</c-><c- o>=</c-><c- s>row</c-><c- p>&gt;</c-> Percentage of net sales
       <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 11.6% <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 12.3% <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 12.6%
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

  <p>This table could look like this:</p>

  <table class="apple-table-examples e2"><thead><tr><th> <th>2008 <th>2007 <th>2006
   <tbody><tr><th scope=rowgroup> Research and development
         <td> $ 1,109 <td> $ 782 <td> $ 712
    <tr><th scope=row> Percentage of net sales
         <td> 3.4% <td> 3.3% <td> 3.7%
   <tbody><tr><th scope=rowgroup> Selling, general, and administrative
         <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
    <tr><th scope=row> Percentage of net sales
         <td> 11.6% <td> 12.3% <td> 12.6%
  </table>



  <nav><a href=embedded-content-other.html>← 4.8.15 MathML</a> — <a href=index.html>Table of Contents</a> — <a href=forms.html>4.10 Forms →</a></nav>
